<template>
  <section>
    <div
      class="stats-card divide-y md:divide-y-0 md:divide-x divide-gray-300"
    >
      <!-- 项目1 -->
      <div class="py-4 w-1/4 space-y-3">
        <p class="font-bold mb-1">
          <CountUp :end-val="60" />
          <span>+</span>
        </p>
        <div class="stats-card-hr" />
        <p class="stats-card-sub">Countries Served</p>
      </div>
      <!-- 项目2 -->
      <div class="py-4 w-1/4 space-y-3">
        <p class="font-bold mb-1">
          <CountUp :end-val="200" />
          <span>+</span></p>
        <div class="stats-card-hr" />
        <p class="stats-card-sub">Employees</p>
      </div>
      <!-- 项目3 -->
      <div class="py-4 w-1/4 space-y-3">
        <p class="font-bold mb-1">
          <CountUp :end-val="1200" />
          <span>+</span>
        </p>
        <div class="stats-card-hr" />
        <p class="stats-card-sub">Satisfied Customers</p>
      </div>
      <!-- 项目4 -->
      <div class="py-4 w-1/4 space-y-3">
        <p class="font-bold mb-1">
          <CountUp :end-val="3000" />
          <span>+m²</span>
        </p>
        <div class="stats-card-hr" />
        <p class="stats-card-sub">Production Workshop</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import CountUp from "./CountUp.vue";
</script>

<style scoped>
.stats-card {
  max-width: 1140px;
  min-height: 148px;
  margin: 0 auto;
  display: flex;
  align-items: center;

  font-size: 36px;
  letter-spacing: normal;
  line-height: 36px;
  text-align: center;

  box-shadow: 0 9px 10px 7px rgba(0, 0, 0, 0.14);
}

.stats-card-hr {
  height: 3px;
  width: 90px;
  margin: 0 auto;
  background-color: #C00000;
}

.stats-card-sub {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 26px;
  text-align: center;

  color: #272626;
}
</style>
